<template>
    <div>
    <div class="border-s my-test">
        <el-table :data="tableData" style="width: 100%" :border="false">
            <el-table-column prop="examinationName" label="考试名称"></el-table-column>
            <el-table-column prop="examinationAddress" label="考试地点"></el-table-column>
            <el-table-column prop="examinationExamTime" label="考试时间"></el-table-column>
            <el-table-column prop="delayedStatus" label="缓考状态" :formatter="delayedStatusFormatter"></el-table-column>
            <el-table-column prop="status" label="报考状态" :formatter="statusFormatter"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="toDetail(scope.row)" type="text" size="medium" class="button-my-test">详情</el-button>
                    <el-button @click="toPay(scope.row)" v-if="scope.row.status == 2" type="text" size="small" class="button-my-test">缴费</el-button>
                    <el-button v-if="scope.row.status == 1 || scope.row.status == 2 || scope.row.status == 0" type="text" size="small" class="button-my-test" @click="deleteKs(scope.row.id)">删除</el-button>
                    <el-button v-if="scope.row.status == 3" type="text" size="small" class="button-my-test" @click="dialogFormVisible = true,form.examinationOrderId = scope.row.id,huankao(),selectHk(scope.row.id)">缓考</el-button>
                    <el-button v-if="scope.row.status == 4" type="text" size="small" class="button-my-test" @click="download(scope.row)">下载准考证</el-button>
                    <el-button v-if="scope.row.status == 5" type="text" size="small" class="button-my-test" @click="downloadZs(scope.row)">下载证书</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="申请缓考" :visible.sync="dialogFormVisible" center width="30%">
            <el-form :model="form" label-position="right" label-width="120px">
                <el-form-item label="缓考理由：">
                    <el-input type="textarea" v-model="form.reason"></el-input>
                </el-form-item>
                <el-form-item label="更换考期：">
                    <el-select v-model="form.season" placeholder="请选择考期">
                        <el-option v-for="item in kaoqi" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号：" class="yzm-div">
                    <el-input type="text" v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="验证码：">
                    <div class="yzm-div">
                        <el-input type="text" v-model="form.code"></el-input>
                        <span v-if="isYzm" @click="addYzm()">获取验证码</span>
                        <span v-else class="hui">{{miao}}</span>
                    </div>
                </el-form-item>
                <el-form-item label="上传申请文件：">
                    <input type="file" @change="changeImage($event)">
                </el-form-item>
                <el-form-item label="提示：">
                    仅能申请一次缓考
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible = false,hksubmit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="parmes.size"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="pageFy"
            :total="total">
            </el-pagination>
    </div>
</template>
<script>
import apiHttp from '../../api/index.js'
export default {
    data(){
        return{
            parmes:{
                current:1,
                size:10,
            },
            tableData:[],
            dialogFormVisible:false,
            form: {
                examinationOrderId:'',
                reason: '',
                season: '',
                phone: '',
                delivery: false,
                fileUrl: '',
            },
            total:0,
            isYzm:true,
            miao:'',
            info:{},
            kaoqi:[]
        }
    },
    mounted(){
        this.list()
        // this.infos()
    },
    methods: {
        handleCurrentChange(val) {
            this.parmes.current = val
            this.list()
        },
        pageFy(val){
            this.parmes.size = val
            this.list()
        },
        list(){
            apiHttp.apiIndex.orderList(this.parmes).then(resp=>{
                if(resp.code == 0){
                    this.tableData = resp.data.records
                    this.total  = Number(resp.data.total)
                }
            })
        },
        // 获取个人信息
        // infos(){
        //     apiHttp.apiIndex.examDetail('').then(resp=>{
        //         if(resp.code == 0){
        //             this.form.phone = resp.data.user.phone
        //         }
        //     })
        // },
        // 去支付
        toDetail(row){
            this.$router.push({
                path:'/students/detail',
                query:{
                    id:row.id
                }
            })
        },
        // 下载准考证
        download(data){
            this.$router.push({
                path:'/students/download',
                query:{
                    fxdata:JSON.stringify(data)
                }
            })
        },
        // 删除考试
        deleteKs(id){
            this.$confirm('您确定要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                apiHttp.apiIndex.orderDelete(id).then(resp => {
                    if(resp.code == 0){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        this.list()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消删除'
                })     
            })
        },
        // 报考状态分拣
        statusFormatter(val){
            if(val.status == 0){
                return '未审核'
            }else if(val.status == 1){
                return '未审核'
            }else if(val.status == 2){
                return '已审核，待付费'
            }else if(val.status == 3){
                return '已付款，待排场'
            }else if(val.status == 4){
                return '已排场，待考试'
            }else if(val.status == 5){
                return '已通过'
            }else if(val.status == 6){
                return '未通过'
            }else if(val.status == 7){
                return '机构驳回'
            }else if(val.status == 8){
                return '协会驳回'
            }
        },
        // 缓考状态
        delayedStatusFormatter(val){
            if(val.delayedStatus == 0){
                return '未申请'
            }else if(val.delayedStatus == 1){
                return '申请中'
            }else if(val.delayedStatus == 2){
                return '申请通过'
            }else{
                return '申请失败'
            }
        },
        // 获取验证码
        yzm(){
            let m = 60
            this.miao = '60秒'
            this.isYzm = !this.isYzm
            let time = setInterval(()=>{
                m--
                this.miao = `${m}秒`
                if(m == 0){
                    this.isYzm = !this.isYzm
                    clearInterval(time)
                }
            },1000)
        },
        addYzm(){
            let parmes = {
                phone:this.form.phone,
                type:2
            }
            apiHttp.apiIndex.accountSms(parmes).then(resp=>{
                if(resp.code == 0){
                    this.$message({
                        message: '发送成功',
                        type: 'success'
                    })
                    this.yzm()
                }else{
                    this.$message.error(resp.message)
                }
            })
        },
        // 上传文件
        changeImage(e){
            let fd = new FormData()
            fd.append('module','delayed')
            if (e.target.files[0].length !== 0) {
                fd.append('file', e.target.files[0])
            }
            apiHttp.apiIndex.uploadImg(fd).then(resp=>{
                if(resp.code == 0){
                    this.form.fileUrl = resp.data
                }
            })
        },
        // 付费
        toPay(data){
            this.$router.push({
                path:'/students/pay',
                query:{
                    id:data.id
                }
            })
        },
        // 提交缓考
        hksubmit(){
            apiHttp.apiIndex.delayedSubmit(this.form).then(resp=>{
                if(resp.code == 0){
                    this.$message({
                        type: 'success',
                        message: '提交成功!'
                    })
                    this.form = {}
                    this.list()
                }
            })
        },
        // 下载证书
        downloadZs(data){
            if(data.certificate){
                window.open(this.$imgPath(data.certificate))
            }else{
                this.$message({
                    type: 'wraning',
                    message: '证书为空'
                })
            }
        },
        // 考期列表
        huankao(){
            apiHttp.apiIndex.infoAllSeason('').then(resp=>{
                if(resp.code == 0){
                    this.kaoqi = resp.data
                }
            })
        },
        // 查询是否有缓考信息
        selectHk(id){
            apiHttp.apiIndex.examOrderDelayed(id).then(resp=>{
                if(resp.code == 0){
                    this.form.reason = resp.data.reason
                    this.form.season = resp.data.season
                    this.form.phone = resp.data.phone
                    this.form.fileUrl = resp.data.fileUrl
                }
            })
        }
    }
}
</script>
<style lang="less">
.my-test{
    .el-table td, .el-table th{
        text-align: center;
        font-size: 16px;
        color: #000;
    }
    .el-table td, .el-table th.is-leaf{
        border-bottom: solid 1px #bfbfbf;
    }
    .el-table th{
        color: #fff;
        background-color: #5d2805;
    }
    .button-my-test span{
        border: solid 1px #5d2805;
        padding: 5px 10px;
        color: #000;
        border-radius: 3px;
        font-size: 14px;
    }
    .button-my-test span:hover{
        background-color: #bc652c !important;
        border-color: #bc652c !important;
        color: #fff !important;
    }
    .yzm-div{
        .el-input{
            width: 50%;
        }
        span{
            height: 30px;
            line-height: 32px;
            display: inline-block;
            padding: 0 10px;
            background-color: #5d2805;
            border-radius: 5px;
            color: #fff;
            margin-left: 20px;
            cursor: pointer;
            width: 80px;
            text-align: center;
        }
        .hui{
            background-color: #999;
        }
    }
}
</style>

